<template>
	<div>
		<div class="Mine ">
			<!-- icons组件 -->
			<Icons></Icons>
			<!-- 头像 组件-->
			<div class="User  flexRow">
				<router-link to="/userinfo" tag="div" class="user-Avatar ">
					<img :src="avatarUrl" />
				</router-link>
				<div class="userInfo ">
					<div class="user-name">{{nickname}}</div>
					<div class="user-sign">签名：{{signature}}</div>
				</div>
				<div class="mark flewCenter border">签到</div>
			</div>

			<!--循环渲染 我的电台，我的视频等 -->
			<div v-for="(item,index) in Data" :key="index" class="myradio  flexRow">
				<div class="icon ">
					<img class="label1" referrerpolicy="no-referrer" :src="item.url" />
				</div>
				<div class="Mname ">{{item.label}}</div>
			</div>


			<!-- 推荐歌单 组件-->
			<RecList :Path="'/listsongs'" :Title="'推荐歌单'" :Data="Resongslist"></RecList>


			<!-- 推荐歌曲 组件-->
			<RecList :Path="'/player'" :Title="'推荐歌曲'" :Data="Resongs"></RecList>


		</div>
	</div>
</template>

<script>
	import RecList from '../../components/ThreeItems.vue'
	import Icons from '../../components/Icons/Icons.vue'
	import IconsData from '../../components/Icons/Icons.js'
	export default {
		components: {
			Icons,
			RecList
		},
		name: "mine",
		data() {
			return {
				Data: [],
				//头像地址
				avatarUrl: '',
				//昵称
				nickname: '',
				//个性签名
				signature: '',
				//推荐歌单
				Resongslist: [],
				//推荐歌曲
				Resongs: [],
				ifLogin: false,

			}
		},
		created() {

		},
		mounted() {
			//推荐歌单
			this.getnewSongs(null)
			//推荐新音乐
			this.getnewSongs('newsong')
			//登录状态
			this.getloginstatus()
			this.Data = IconsData[1].icons1

		},

		methods: {
			//推荐新新音乐，歌单，
			async getnewSongs(name) {
				const {
					data: res
				} = await this.$http.get(`/personalized/${name}`, {
					params: {
						limit: 3
					}
				})
				if (res.code !== 200) {
					this.$message.error('获取个歌单失败')
					console.log(res)
				} else {
					if (name == 'newsong') {
						this.Resongs = res.result
						// console.log(this.Resongs)
					} else {
						
						this.Resongslist = res.result
						// console.log(this.Resongslist)
					}
				}

			},


			//查看登录状态
			async getloginstatus() {
				const {
					data: res
				} = await this.$http.get('/login/status')

				if (res.data.code !== 200) {
					console.log(res)
					this.ifLogin = false
				} else {

					this.ifLogin = true
					this.avatarUrl = res.data.profile.avatarUrl
					this.nickname = res.data.profile.nickname
					this.signature = res.data.profile.signature
				}

			}
		}
	}
</script>

<style>
	.user-sign {
		font-size: 5px;
		font-weight: 100;
		color: #dcdc00;
	}

	.user-name {
		font-size: 10px;
		font-weight: 800;
		color: #7e7e7e;
	}

	.user-Avatar img {
		width: 60px;
		border-radius: 50%;
		overflow: hidden;
	}

	.mark {
		z-index: 8;
		height: 26px;

		width: 71px;

		border-radius: 13px;

	}

	.userInfo {
		z-index: auto;
		width: 120px;
		height: 42px;
		margin-right: 15px;
	}

	.user-Avatar {
		background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psedd0ukqo7fix2qzqpm6na8oycj5r7aim93b85c373-60ba-407d-bec8-d82ef30ed49c);
		z-index: 5;
		width: 60px;
		height: 59px;


	}

	.User {
		z-index: auto;
		width: 339px;
		height: 59px;
		margin: 10px auto;
		align-items: center;
		justify-content: space-between;
	}



	.Mname {
		font-size: small;
		color: #636363;
		z-index: 5;
		width: 65px;
		height: 17px;
		margin-top: 5px;
	}

	.icon {
		z-index: 4;
		width: 17px;
		height: 17px;
		margin: 0 15px;
	}

	.myradio {
		z-index: auto;
		width: 100%;
		height: 25px;

		margin: 10px auto;
	}
</style>
